<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <div id="app">
    <my-btn title="发送"></my-btn>
    <my-btn title="确定"></my-btn>
    <my-send :count="num"></my-send>
    <my-send count="60"></my-send>
    <my-send count="90"></my-send>
    <my-send count="150"></my-send>
    <my-send count="200"></my-send>
  </div>
</body>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
<script>
  const options={
    data(){
      return{
        num:20
      }
    },
    created(){
      console.log("页面创建")
    }

  }
  Vue.createApp(options)
    .component('my-btn',{
      props:['title'],
      template: `<button>{{title}}</button>`
    })
    .component('my-send',{
      data(){
        return {
          interval:{},
          interCount:'发送'
        }
      },
      props:{
        count:{
          type:Number,
          default:60,
          required:true
        }
      },
      created(){
        console.log("组件创建")
      },
      methods:{
        send(){
          this.interCount = this.count;
          this.interval = setInterval(()=>{
            if(this.interCount<=0){
              this.interCount = "重新发送";
              clearInterval(this.interval)
            }
            if(this.interCount >0){
              this.interCount--;
            }

          },1000)
        }
      },
      template:`<input type="button" @click="send" v-model="interCount"/>`
    })
    .mount("#app");
</script>
</html>